<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>计划任务管理</title>
  <link rel="stylesheet" href="/common/js/layui/css/layui.css">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    .layui-table-box{
    	height:inherit;
    }
  </style>
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
计划任务管理系统
</blockquote>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<div id="toolbarDemo" class="layui-table-tool-temp layui-hide">
	<div class="layui-inline" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
	</div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="pause">暂停</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="resume">恢复</a>
</script>
<script src="/common/js/jquery/jquery-2.1.4.js"></script>
<script src="/common/js/layui/layui.js"></script>
<script>
layui.config({
  version: '1554901098009' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table','form'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,form = layui.form;
  
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 420
    ,url: 'qrtzJobDetails/listByPage' //数据接口
    ,title: '列表'
    ,page: true //开启分页
    ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'schedName', title: '调度器', width:'10%'}
      ,{field: 'jobName', title: '计划名称', width:'15%'}
      ,{field: 'jobGroup', title: '任务组', width: '10%', sort: true, totalRow: true}
      ,{field: 'description', title: '任务描述', width:'10%', sort: true}
      ,{field: 'cronExpression', title: '表达式', width: '15%', sort: true, totalRow: true}
      ,{field: 'triggerState', title: '状态', width:'10%'} 
      ,{fixed: 'right', width: '25%', align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.open({
        	type: 1, 
        	area: ['600px', '500px'],
            content: '<iframe name="myIframe" style="display:none;" onload="iframeLoad(this)"></iframe>'+
                     '<form class="layui-form" action="qrtzJobDetails/add" style="padding:15px" target="myIframe">'+
		            	  '<div class="layui-form-item">'+
					          '<label class="layui-form-label">任务名称</label>'+
					          '<div class="layui-input-block">'+
					              '<input type="text" name="jobName" required  lay-verify="required" placeholder="例如：helloService.hello" autocomplete="off" class="layui-input">'+
					          '</div>'+
					      '</div>'+
					      '<div class="layui-form-item">'+
					          '<label class="layui-form-label">任务描述</label>'+
					          '<div class="layui-input-block">'+
					              '<input type="text" name="description" required  lay-verify="required" autocomplete="off" class="layui-input">'+
					          '</div>'+
					      '</div>'+
					      '<div class="layui-form-item">'+
					          '<label class="layui-form-label">任务分组</label>'+
					          '<div class="layui-input-block">'+
					              '<input type="text" name="jobGroup" required  lay-verify="required" autocomplete="off" class="layui-input">'+
					          '</div>'+
					      '</div>'+
					      '<div class="layui-form-item">'+
					          '<label class="layui-form-label">cron表达式</label>'+
					          '<div class="layui-input-block">'+
						          '<input type="text" style="display:inline-block;width:70%" name="cronExpression" required lay-verify="required" autocomplete="off" class="layui-input">'+
					              '<button class="layui-btn" type="button" onclick="newCron()">cron表达式</button>'+
					          '</div>'+
					      '</div>'+
					      '<div class="layui-form-item">'+
					          ''+
					      '</div>'+
				          '<div class="layui-form-item">'+
					            '<div class="layui-input-block">'+
					              '<button class="layui-btn" type="submit">提交</button>'+
					              '<button type="reset" class="layui-btn layui-btn-primary">重置</button>'+
					           '</div>'+
					      '</div>'+
			        '</form>'});
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'del'){
      layer.confirm('确定删除吗？', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
        $.ajax({
        	url:'qrtzJobDetails/delete',
        	data:data,
        	type:'post',
        	dataType:'json',
        	success:function(result){
        		layer.msg('删除成功');
        	}
        });
      });
    } else if(layEvent === 'edit'){
    	layer.open({
        	type: 1, 
        	area: ['600px', '300px'],
            content: '<iframe name="myIframe2" style="display:none;" onload="iframeLoad2(this)"></iframe>'+
                     '<form class="layui-form" action="qrtzJobDetails/edit" style="padding:15px" target="myIframe2">'+
            			  '<input type="hidden" name="jobName" value="'+data.jobName+'"/>'+
            			  '<input type="hidden" name="jobGroup" value="'+data.jobGroup+'"/>'+
		            	  '<div class="layui-form-item">'+
					          '<label class="layui-form-label">任务名称</label>'+
					          '<div class="layui-input-block"><span style="line-height: 40px;color:gray">'+data.jobName+'</span></div>'+
					      '</div>'+
					      '<div class="layui-form-item">'+
					          '<label class="layui-form-label">cron表达式</label>'+
					          '<div class="layui-input-block">'+
					              '<input type="text" style="display:inline-block;width:70%" name="cronExpression" required value="'+data.cronExpression+'" lay-verify="required" autocomplete="off" class="layui-input">'+
					              '<button class="layui-btn" type="button" onclick="newCron()">cron表达式</button>'+
					          '</div>'+
					      '</div>'+
				          '<div class="layui-form-item">'+
					            '<div class="layui-input-block">'+
					              '<button class="layui-btn" type="submit">提交</button>'+
					           '</div>'+
					      '</div>'+
			        '</form>'});
    	/* $.ajax({
        	url:'qrtzJobDetails/edit',
        	data:data,
        	type:'post',
        	dataType:'json',
        	success:function(result){
        		layer.msg('操作成功');
        	}
        }); */
    } else if(layEvent === 'pause'){
    	$.ajax({
        	url:'qrtzJobDetails/pause',
        	data:data,
        	type:'post',
        	dataType:'json',
        	success:function(result){
        		layer.msg('操作成功');
        	},error:function(){
        		table.reload('demo', {url:'qrtzJobDetails/listByPage'});
        	}
        });
    } else if(layEvent === 'resume'){
    	$.ajax({
        	url:'qrtzJobDetails/resume',
        	data:data,
        	type:'post',
        	dataType:'json',
        	success:function(result){
        		layer.msg('操作成功');
        	},error:function(){
        		table.reload('demo', {url:'qrtzJobDetails/listByPage'});
        	}
        });
    }
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
});
function iframeLoad(_this){
	var doc = _this.contentWindow.document; 
	if(doc!='' && doc!=null && doc.body!='' && doc.body!=null){
		var html = doc.body.innerHTML;
	    if(html!=''){
	    	if(html.indexOf('"success":false')!=-1){
	    		layer.msg('保存出错');
	        }else{
	        	layer.msg('保存成功');
	        	window.location.reload();
	        }
	    }
	}
}
function iframeLoad2(_this){
	var doc = _this.contentWindow.document; 
	if(doc!='' && doc!=null && doc.body!='' && doc.body!=null){
		var html = doc.body.innerHTML;
	    if(html!=''){
	    	layer.msg('保存成功');
        	window.location.reload();
	    }
	}
}

function newCron() {
    window.open("/common/js/cronb/cron.htm", "_blank", "top=50,left=100,width=1000,height=600,menubar=yes,scrollbars=no,toolbar=yes,status=yes");
}
</script>
</body>
</html>